<template>
	<view class="server">
		<view class="server-top">
			<view class="info" v-if="appid=='wx28af18940b770ea8'">
				<view class="info-tit">设计服务说明：</view>				<view class="info-des">1、24小时提交家具效果方案。</view>				<view class="info-des">2、如需全屋个性化设计，大咖设计为您家提供专属的设计服务。</view>
			</view>
			<image :src="server_code" mode="widthFix" show-menu-by-longpress v-if="server_code"></image>
			<view style="color: #FFF;" v-else>未设置客服二维码，请拨打客服电话</view>
		</view>
		<view class="server-bot">
			<view class="server-bot-tips">扫一扫二维码，添加客服微信</view>
			<!-- #ifndef H5 -->
			<view class="server-bot-save" @click="saveImg">保存到相册</view>
			<!-- #endif -->
			<!-- #ifdef H5 -->
			<view class="server-bot-save">长按图片保存到相册</view>
			<!-- #endif -->
			<view class="server-bot-call" @click="makeCall">联系TA</view>
		</view>
		<pt-openSetting ref="openSetting" tips="您已关闭相册访问开关，请打开开关后重新保存"></pt-openSetting>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				server_code: '',
				server_phone: '',
				appid: ''
			};
		},
		methods: {
			saveImg(){
				if(!this.server_code){
					uni.showToast({
						icon: 'none',
						title: '未设置客服二维码'
					})
					return
				}
				uni.downloadFile({
					url: this.server_code,
					success: (downRes) => {
						// #ifdef APP-PLUS
						uni.saveImageToPhotosAlbum({
							filePath: downRes.tempFilePath,
							success(saveRes) {
								uni.showToast({
									icon: 'none',
									title: '保存成功，请在相册中查看',
									duration: 1500
								})
							},
							fail: () => {
								uni.showToast({
									icon: 'none',
									title: '保存失败，您已取消保存图片'
								})
							}
						})
						// #endif
						// #ifdef MP-WEIXIN
						uni.getSetting({
							withSubscriptions: true,
							success: (scope) => {
								if(!scope.authSetting['scope.writePhotosAlbum']){
									uni.authorize({
										scope: 'scope.writePhotosAlbum',
										success: () => {
											uni.saveImageToPhotosAlbum({
												filePath: downRes.tempFilePath,
												success(saveRes) {
													uni.showToast({
														icon: 'none',
														title: '保存成功，请在相册中查看',
														duration: 1500
													})
												},
												fail: () => {
													uni.showToast({
														icon: 'none',
														title: '保存失败，您已取消保存图片'
													})
												}
											})
										},
										fail: () => {
											this.$refs.openSetting.init()
										}
									})
								}else{
									uni.saveImageToPhotosAlbum({
										filePath: downRes.tempFilePath,
										success(saveRes) {
											uni.showToast({
												icon: 'none',
												title: '保存成功，请在相册中查看',
												duration: 1500
											})
										},
										fail: () => {
											uni.showToast({
												icon: 'none',
												title: '保存失败，您已取消保存图片'
											})
										}
									})
								}
							}
						})
						// #endif
					}
				})
			},
			makeCall(){
				uni.makePhoneCall({
					phoneNumber: this.server_phone?this.server_phone:'13922299470'
				})
			}
		},
		mounted() {
			// #ifdef MP-WEIXIN
			this.appid = uni.getExtConfigSync().appid
			// #endif
			this.server_code = uni.getStorageSync('serviceInfo').service_code
			this.server_phone = uni.getStorageSync('serviceInfo').service_phone
		}
	}
</script>

<style lang="scss">
	.server{
		width: 600rpx;
		border-radius: 10rpx;
		overflow: hidden;
		.server-top{
			padding: 70rpx 0;
			background-color: #141414;
			position: relative;
			text-align: center;
			&::after{
				position: absolute;
				content: '';
				width: 0;
				height: 0;
				border-left: 20rpx solid transparent;
				border-right: 20rpx solid transparent;
				border-top: 20rpx solid #141414;
				bottom: -20rpx;
				left: 50%;
				transform: translateX(-50%);
			}
			image{
				width: 280rpx;
				height: 280rpx;
				border-radius: 8rpx;
			}
			.info{
				color: #FFF;
				line-height: 50rpx;
				text-align: left;
				padding: 0 30rpx;
				margin-bottom: 30rpx;
				.info-tit{
					font-size: 30rpx;
				}
				.info-des{
					font-size: 24rpx;
				}
			}
		}
		.server-bot{
			background-color: #FFF;
			text-align: center;
			padding: 50rpx;
			.server-bot-tips{
				color: #141414;
				font-size: 36rpx;
				font-weight: bold;
			}
			.server-bot-save{
				display: inline-block;
				width: 400rpx;
				height: 72rpx;
				line-height: 68rpx;
				border: 2rpx solid rgba(20,20,20,1);
				border-radius: 8rpx;
				font-size: 28rpx;
				color: #141414;
				margin-top: 40rpx;
			}
			.server-bot-call{
				display: inline-block;
				width: 400rpx;
				height: 72rpx;
				line-height: 72rpx;
				background: rgba(245,147,89,1);
				border-radius: 8rpx;
				color: #FFF;
				font-size: 28rpx;
				margin-top: 40rpx;
			}
		}
	}
</style>